<template>
  <h1>文本相关指令</h1>

  <!-- 插值指令 将此处显示的文本与变量进行绑定，修改变量的值，页面文本随之改变 -->
  <p>{{ info }}</p>
  <h1>{{ info }}</h1>
  <h1>{{ info }}</h1>
  <!-- 响应式变量的值也可以拼接  -->
  {{ info + "早上好" }}

  <hr>
  <!-- 给按钮绑定一个点击事件 -->
  <button @click="f()">我是按钮</button>

  <hr>
  <p v-text="info"></p>
  <p v-html="info"></p>

</template>

<script setup>

import {ref} from "vue";
// 响应式变量
const info = ref('ssss');

const f = () => {// 箭头函数 固定写法(参数列表) => {方法体}
  info.value = '值变了';//在JS中使用响应式变量的值 必须 .value !!!
  info.value = '<br>值变了</br>';
}

</script>


<style scoped>

</style>